<template>
  <PageWrapper title="任务管理" content="">
    <a-card title="任务提交" v-bind="$attrs" style="margin-bottom: 20px">
      <a-form layout="horizontal" :model="formState">
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-item label="任务类型">
              <a-select>
                <a-select-option value="Fibonacci">Fibonacci(计算斐波那契数列)</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="任务数量">
              <a-input-number
                v-model:value="formState.num"
                placeholder="任务数量"
                :min="1"
                :max="9999"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="调度范围">
              <a-input v-model:value="formState.scope" placeholder="虚拟机名称正则表达式" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="失效调度">
              <a-select v-model:value="formState.failsche">
                <a-select-option value="all">全局（.*）</a-select-option>
                <a-select-option value="samevm">同物理机优先（{curr_vm}.*）</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item>
          <a-button type="primary" @click="add">提交</a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card title="任务列表" v-bind="$attrs">
      <a-table :columns="columns" :data-source="jobs">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
            <span> 任务名称 </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>
          <template v-if="column.key === 'server'">
            <a> {{ record.vm.server.name }} </a>
          </template>
          <template v-if="column.key === 'vm'">
            <a> {{ record.vm.name }} </a>
          </template>
          <template v-if="column.key === 'state'">
            <a-tag v-if="record.state == 'run'" color="#87d068">运行中</a-tag>
            <a-tag v-if="record.state == 'sche'" color="#3353FF">调度中</a-tag>
          </template>
          <template v-if="column.key === 'schenum'">
            <a> {{ record.schenum }} </a>
          </template>
          <template v-else-if="column.key === 'tags'">
            <span>
              <a-tag
                v-for="tag in record.tags"
                :key="tag"
                :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a-tooltip>
                <template #title>显示日志</template
                ><code-outlined @click="showLog(record)" key="ellipsis"
              /></a-tooltip>
            </span>
          </template>
        </template>
      </a-table>
    </a-card>

    <div v-if="currJob">
      <a-modal v-model:visible="visible" :title="currJob.name" @ok="() => (visible = false)">
        <div
          v-if="currJob"
          style="padding: 20px; background-color: black; height: 600px; overflow: scroll"
        >
          <div v-for="s in currJob.log" style="color: white">{{ s }}</div>
        </div>
      </a-modal>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { PageWrapper } from '/@/components/Page'
  import { SmileOutlined, DownOutlined, CodeOutlined } from '@ant-design/icons-vue'
  import { defineComponent, ref } from 'vue'
  import { useDataStore } from '/@/store/modules/data'
  import { Icon } from '/@/components/Icon'
  import { reactive } from 'vue'
  import type { UnwrapRef } from 'vue'
  import { notification } from 'ant-design-vue';


  interface FormState {
    layout: 'horizontal' | 'vertical' | 'inline'
    num: number
    scope: string
    failsche: string
  }

  const formState: UnwrapRef<FormState> = reactive({
    layout: 'horizontal',
    num: 100,
    scope: '.*',
    failsche: 'all'
  })

  const data = useDataStore()
  const visible = ref<boolean>(false)
  let currJob = ref(data.jobs[0])

  const columns = [
    {
      name: '任务名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '物理机',
      key: 'server',
      dataIndex: 'server',
    },
    {
      title: '虚拟机',
      key: 'vm',
      dataIndex: 'vm',
    },
    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
    },
    {
      title: '调度次数',
      key: 'schenum',
      dataIndex: 'vm',
    },
    {
      title: '操作',
      key: 'action',
    },
  ]

  function add() {
    data.addJobs(formState.num, formState.failsche)
    setTimeout(() => {
      notification['success']({
        message: '操作结果',
        description:
          '创建任务成功！',
      });
      1000
    })
  }

  function showLog(job) {
    console.log(job)
    currJob.value = job
    visible.value = true
  }

  export default defineComponent({
    components: {
      SmileOutlined,
      DownOutlined,
      PageWrapper,
      Icon,
      CodeOutlined,
    },
    setup() {
      return {
        jobs: data.jobs,
        columns,
        add,
        showLog,
        currJob,
        visible,
        formState,
      }
    },
  })
</script>
